# Component: Shop Option

Product add-on selector with dynamic list and button layout modes

Ecommerce Atom

### BEM Anatomy

| Type      | Class Name              | Description                                                                                             |
| --------- | ----------------------- | ------------------------------------------------------------------------------------------------------- |
| ==Block== | `.as-shop-option`       | The core wrapper. Manages the overall label and list structure.                                         |
| Element   | `__list`                | The items container. Modifiers `--button` (flex-wrap) and `--list` (ListGroup) change the layout logic. |
| Element   | `__item`                | An individual option node. Uses `--active` to apply primary theme emphasis when selected.               |
| Modifier  | `__item--active`        | Applies primary theme emphasis (border/background) when the option is currently selected.               |
| Element   | `__item-label`          | The text identifying the option (e.g., "Extra Large").                                                  |
| Element   | `__item-price`          | The additional cost (or discount) associated with the specific option.                                  |
| Element   | `__actions`             | Container for utility controls, such as the "Clear" button.                                             |
| Modifier  | `__actions--has-labels` | Adjusts margins or visibility if text labels are present alongside icons in the action area.            |
| Element   | `__button`              | Base class for functional buttons within the option block.                                              |
| Modifier  | `__button--clear`       | A circular warning button used to reset selected options.                                               |

### Layout Modes

This component adapts its structure based on the `DisplayCode`. **Button mode** is optimized for small, price-only increments, while **List mode** provides a full-width row with space for descriptive names and aligned pricing.

##### Generated HTML (List Mode with Active Item)

```html
<div class="as-shop-option">
    <label class="as-shop-option__label">Choose Toppings</label>
    <ul class="as-shop-option__list--list list-group">
        <li class="as-shop-option__item as-shop-option__item--active list-group-item">
            <div class="as-shop-option__item-label">Extra Cheese</div>
            <div class="as-shop-option__item-price">+ $1.50</div>
        </li>
    </ul>
    <div class="as-shop-option__actions as-shop-option__actions--has-labels">
        <button class="as-shop-option__button--clear btn btn-warning">
            <i class="fa-solid fa-xmark"></i>
        </button>
    </div>
</div>
```

##### SCSS

```scss
.as-shop-option {
  &__list--button {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  &__item--active {
    // Uses Bootstrap 5.3+ CSS variables 
    // for semantic primary highlighting
    --bs-list-group-bg: var(--bs-primary-bg-subtle);
    --bs-list-group-border-color: var(--bs-primary-border-subtle);
  }

  &__button--clear {
    border-radius: 50%; // Makes the "X" button round
    padding: 0.5rem;
  }
}
```
